<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="确认订单"
        left-arrow
        @click-left="back"
      />
    </header>
    <div class="content">
      <div class="address">
        <van-cell v-if="flag" is-link icon="location-o" center :title="name + ' ' + tel" :label="address" @click="selectAddress"/>
        <van-cell v-else is-link icon="location-o" center title="点击添加地址" @click="selectAddress"  />
      </div>
      <van-card
        v-for="item of orderlist"
        :key="item.orderid"
        :num="item.num"
        :price="item.price"
        :title="item.proname"
        :thumb="item.proimg"
      />
      <van-submit-bar :price="totalPrice" :disabled="!flag" button-text="去支付" @submit="onSubmit" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Card, Cell, SubmitBar, Dialog } from 'vant'
import { getConfirmOrder, deleteCartData } from '@/api'
import { defaultAddress, updateOrderAddress } from '@/api/address'
import { mapState } from 'vuex'
Vue.use(NavBar)
Vue.use(Card)
Vue.use(Cell)
Vue.use(SubmitBar)
export default {
  data () {
    return {
      orderlist: [],
      name: '黎铭心',
      tel: '17865922981',
      address: '上海市宝山区吴淞街道同济支路199号3号楼千锋教育',
      flag: false
    }
  },
  computed: {
    ...mapState({
      userid: ({ user: { userid } }) => userid
    }),
    totalPrice () {
      return this.orderlist ? this.orderlist.reduce((sum, item) => {
        return sum + item.num * item.price
      }, 0) * 100 : 0
    }
  },
  methods: {
    back () {
      Dialog.confirm({
        message: '真的要离开该订单吗? 便宜不等人,三思而后行',
        confirmButtonText: '去意已决',
        cancelButtonText: '我再想想'
      }).then(() => {
        this.$router.back()
      }).catch(() => {
      })
    },
    onSubmit () {
      if (this.orderlist[0].tel.length === 0) {
        updateOrderAddress({
          userid: this.userid,
          time: this.$route.params.time,
          name: this.name,
          tel: this.tel,
          address: this.address
        }).then(() => {
          this.pay()
        })
      } else {
        this.pay()
      }
    },
    pay () {
      const list = []
      this.orderlist.forEach(item => {
        list.push(item.proid)
      })
      deleteCartData({
        userid: this.userid,
        list
      }).then(() => {
        this.$router.push('/pay/' + this.$route.params.time)
      })
    },
    formatAddress (province, city, county) {
      let str = ''
      str = province === city ? province + county : province + city + county
      return str
    },
    selectAddress () {
      this.$router.push('/orderaddresslist/' + this.$route.params.time)
    }
  },
  mounted () {
    getConfirmOrder({
      userid: this.userid,
      time: this.$route.params.time
    }).then(res => {
      this.orderlist = res.data.data
      if (this.orderlist[0].tel.length === 0) {
        defaultAddress({
          userid: this.userid
        }).then(res => {
          if (res.data.data.length === 0) {
            this.flag = false
          } else {
            this.flag = true
            const result = res.data.data[0]
            this.name = result.name
            this.tel = result.tel
            this.address = this.formatAddress(result.province, result.city, result.county) + ' ' + result.addressDetail
          }
        })
      } else {
        this.flag = true
        this.name = this.orderlist[0].name
        this.tel = this.orderlist[0].tel
        this.address = this.orderlist[0].address
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.van-card__price {
  color: #f2270c;
  .van-card__price-currency{
    padding-right:0.05rem;
  }
}
</style>
